<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <hello-js></hello-js>
    <!-- 中划线使用方法 -->
  </div>
  <script src="../vue.js"></script>
  <script>
    /*
      如果想创建一个组件，需要使用Vue.component() 这个方法
      第一个参数：组件的名称
      第二个参数：是一个对象 里面是一些属性等配置信息
      注意：组件内部的数据，需要写在data这个函数中
    */
    Vue.component('helloJs', {
      data: function () {
        // 在data函数内部，必须return一个对象 对象里面是当前组件私有的数据
        return {
          name: 'jerry',
          age: 3
        }
      },
      // template 代表的是页面的模板也就是页面的结构 模板内部必须有一个根元素，且只有一个
      // 组件如果是驼峰式写法，如果要在页面中当标签使用，必须改成中划线分隔的方式
      // 但是在模板字符串中，是可以不用中划线写法
      template: `  
      <div>
        <p>
          <button @click='add'>按钮</button>
        </p>
        <p>{{name}}</p>
        <p>{{age}}</p>
        <hr>
      </div>`,
      methods: {
        add() {
          this.age++
        }
      }
    })

    var vm = new Vue({
      el: '#app',
      data: {}
    })
  </script>
</body>

</html>